<template>
	<div id="formBatch">
		<h1>批次基础信息</h1>
		<el-form ref="form" label-width="80px">
			<el-form-item
      label-width="140px"
      :rules="[{required:true}]"
      label="批次名称：">
				<el-input v-model="phase_time.name"></el-input>
			</el-form-item>
			<el-form-item
      :rules="[{required:true}]"
      label-width="140px"
      label="所属单位：">
				<el-input v-model="batch.company"></el-input>
			</el-form-item>
			<el-row>
				<el-col :span="12">
					<el-form-item
          label-width="140px"
          :rules="[{required:true}]"
          label="批次级别：">
						<el-cascader v-model="batch.level_id" :options="levelOptions" :show-all-levels="false"
							:props="{ value:'levelId', label:'levelName',children:'aaa'}">
						</el-cascader>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label-width="140px" id="switchExpert" label="专家设置：">
						<el-switch v-model="switchExpert" @change="emptyTime"> </el-switch>
					</el-form-item>
				</el-col>
			</el-row>

			<el-form-item
      label-width="140px"
      :rules="[{required:true}]"
      label="项目分类：">
				<div>
					<el-tag :key="tag.id" v-for="tag in classifyTags" closable :disable-transitions="false"
						@close="handleClose(tag)">
						{{ tag }}
					</el-tag>
					<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput"
						size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
					</el-input>
					<el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新分类</el-button>
				</div>
			</el-form-item>
			<el-form-item
      :rules="[{required:true}]"
      label-width="140px"
      label="最大主持数：">
				<el-input v-model="batch.max_host"></el-input>
			</el-form-item>
			<el-form-item
      label-width="140px"
      :rules="[{required:true}]"
      label="最大参与数：">
				<el-input v-model="batch.max_participants"></el-input>
			</el-form-item>
			<el-form-item
       label-width="140px"
       :rules="[{required:true}]"
       label="教师申报时间：">
				<DateTimeRange :before.sync="date" :start.sync="phase_time.phase_teacher_start"
					:end.sync="phase_time.phase_teacher_end" :last.sync="phase_time.phase_department_start">
				</DateTimeRange>
			</el-form-item>
			<el-form-item
      label-width="140px"
      :rules="[{required:true}]"
      label="院级审核时间：">
				<DateTimeRange :before.sync="phase_time.phase_teacher_end"
					:start.sync="phase_time.phase_department_start" :end.sync="phase_time.phase_department_end"
					:last.sync="phase_time.phase_school_first_start"></DateTimeRange>
			</el-form-item>
			<el-form-item
      :rules="[{required:true}]"
      label-width="140px"
      label="校级审核时间：">
				<DateTimeRange :before.sync="phase_time.phase_department_end"
					:start.sync="phase_time.phase_school_first_start" :end.sync="phase_time.phase_school_first_end"
					:last.sync="phase_time.phase_expert_start"></DateTimeRange>
			</el-form-item>
			<el-form-item
      label-width="140px"
      :rules="[{required:true}]"
      label="专家审核时间：" v-if="switchExpert">
				<DateTimeRange :before.sync="phase_time.phase_school_first_end"
					:start.sync="phase_time.phase_expert_start" :end.sync="phase_time.phase_expert_end"
					:last.sync="phase_time.phase_school_second_start"></DateTimeRange>
			</el-form-item>
			<el-form-item
      label-width="140px"
      :rules="[{required:true}]"
      label="校级复审时间：" v-if="switchExpert">
				<DateTimeRange :before.sync="phase_time.phase_expert_end"
					:start.sync="phase_time.phase_school_second_start" :end.sync="phase_time.phase_school_second_end"
					:last.sync="last"></DateTimeRange>
			</el-form-item>
			<el-form-item label-width="140px" label="提醒：" v-if="
          (switchExpert && phase_time.phase_school_second_end != '') ||
          (!switchExpert && phase_time.phase_school_first_end != '')
        ">
				<el-row>
					<el-col :span="18">
						<DateTimeRange :before.sync="alter" :start.sync="batch.middle_time" :end.sync="batch.post_time"
							:last.sync="last" :startTip.sync="startTip" :endTip.sync="endTip"></DateTimeRange>
					</el-col>
					<el-col :span="6">
						<el-switch v-model="switchAlert" @change="switchAlertFun">
						</el-switch>
					</el-col>
				</el-row>
			</el-form-item>
			<el-form-item id="btn">
				<el-button type="primary" @click="submitForm">创建</el-button>
				<el-button @click="resetForm">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
	import DateTimeRange from "@/components/DateTimeRange";
	export default {
		components: {
			DateTimeRange
		},
		data() {
			return {
				date: Date.now() - 24 * 60 * 60 * 1000,
				startTip: '中期设置提醒时间',
				endTip: '结项设置提醒时间',
				last: "",
				batch_id: "",
				batch:{
					level_id: "",
					level_name: "",
					company: "",
					max_host: "",
					max_participants: "",
					middle_time:"",
					post_time:"",
				},
				phase_time: {
					phase_id: "",
					phase_name: "",
					phase_teacher_start: "",
					phase_teacher_end: "",
					phase_department_start: "",
					phase_department_end: "",
					phase_school_first_start: "",
					phase_school_first_end: "",
					phase_expert_start: "",
					phase_expert_end: "",
					phase_school_second_start: "",
					phase_school_second_end: "",
					score_path: "",
					path: "",
					type:''
				},
				levelOptions: [],
				switchExpert: true,
				switchAlert: false,
				alter: "",
				classifyTags: ["理科", "文科"],
				inputVisible: false,
				inputValue: ""
			};
		},
		mounted() {
			this.getDataAxios();
			this.getAllLevel();
		},
		methods: {
			getTreeData(data) {
				// 循环遍历json数据
				for (var i = 0; i < data.length; i++) {

					if (data[i].children.length < 1) {
						// children若为空数组，则将children设为undefined
						data[i].children = undefined;
					} else {
						// children若不为空数组，则继续 递归调用 本方法
						this.getTreeData(data[i].children);
					}
				}
				return data;
			},
			resetForm() { //重置表单内容
				this.phase_time.name = null, //设置批次名称为空
					this.batch.company = "", //所属批次为空
					this.batch.level_id = "", //批次级别为空
					this.classifyTags = ["理科", "文科"] //项目分类为默认，理科-文科
					this.batch.max_host = "",
					this.batch.max_participants = "",
					this.switchExpert = true
			},
			//创建批次时间
			creatPhaseTimeAxios() {
				this.$api.batch
					.creatPhaseTime({
						// batchId:this.batch_id,
						phaseTeacherStart: this.phase_time.phase_teacher_start,
						phaseTeacherEnd: this.phase_time.phase_teacher_end,
						phaseDepartmentStart: this.phase_time.phase_department_start,
						phaseDepartmentEnd: this.phase_time.phase_department_end,
						phaseSchoolFirstStart: this.phase_time.phase_school_first_start,
						phaseSchoolFirstEnd: this.phase_time.phase_school_first_end,
						phaseExpertStart: this.phase_time.phase_expert_start,
						phaseExpertEnd: this.phase_time.phase_expert_end,
						phaseSchoolSecondStart: this.phase_time.phase_school_second_start,
						phaseSchoolSecondEnd: this.phase_time.phase_school_second_end,
					}).then((response) => {
						console.log(response)
						if (response.data.code == 200) {
							this.$message({
								showClose: true,
								message: '批次创建成功！',
								type: 'success',
							});
						} else {
							this.$message({
								showClose: true,
								message: '批次创建失败！',
								type: 'error',
							});
						}

					})
			},
			//获取数据
			getDataAxios() {
				this.batch_id = this.$route.query.batch_id;
				if (this.batch_id != undefined) {}
			},
			getAllLevel() {
				this.$api.Level.getAllLevel()
					.then((response) => {
						console.log(response)
						this.levelOptions = this.getTreeData(response.data.data)
						console.log(this.levelOptions)
					})
			},
			//新建批次方法
			createBatchAxios() {
				this.$api.batch.createBatch({
					batchName: this.phase_time.name,
					classifyName: this.classifyTags,
					company: this.batch.company,
					levelId: this.batch.level_id[this.batch.level_id.length - 1],
					maxHost: this.batch.max_host,
					maxParticipants: this.batch.max_participants,
					middleTime: this.batch.middle_time,
					// middle_time:"",
					phaseTeacherEnd: this.phase_time.phase_teacher_end,
					phaseTeacherStart: this.phase_time.phase_teacher_start,
					postTime: this.batch.post_time,
					// post_time:"",
					// type: 1,
					phaseDepartmentStart: this.phase_time.phase_department_start,
					phaseDepartmentEnd: this.phase_time.phase_department_end,
					phaseSchoolFirstStart: this.phase_time.phase_school_first_start,
					phaseSchoolFirstEnd: this.phase_time.phase_school_first_end,
					phaseExpertStart: this.phase_time.phase_expert_start,
					phaseExpertEnd: this.phase_time.phase_expert_end,
					phaseSchoolSecondStart: this.phase_time.phase_school_second_start,
					phaseSchoolSecondEnd: this.phase_time.phase_school_second_end,
          status:0
				}).then((response) => {
					console.log(response)
					console.log(response.data.code)
					if (response.data.code == 200) {
						this.$message({
							showClose: true,
							message: '批次创建成功！',
							type: 'success',
							center:true,
							offset:(screen.height/2)-80
						});
						this.$router.push({
							path: '/batch'
						});
					} else {
						this.$message({
							showClose: true,
							message: '批次创建失败！',
							type: 'error',
							center:true,
							offset:(screen.height/2)-80
						});
					}
				})
			},
			//清空专家相关时间
			emptyTime() {
				this.phase_time.phase_expert_start = "";
				this.phase_time.phase_expert_end = "";
				this.phase_time.phase_school_second_start = "";
				this.phase_time.phase_school_second_end = "";
				this.emptyAlert();
			},
			emptyAlert() {
				this.alter = "";
				this.switchAlert = false;
				this.batch.middle_time = "";
				this.batch.post_time = "";
			},
			switchAlertFun() {
				if (this.switchAlert) {
					if (this.switchExpert) {
						this.alter = this.phase_time.phase_school_second_end;
						this.batch.middle_time="";
						this.batch.post_time="";
					} else {
						this.alter = this.phase_time.phase_school_first_end;
						this.batch.middle_time="";
						this.batch.post_time="";
					}
				} else {
					this.alter = "";
					this.batch.middle_time="";
					this.batch.post_time="";
				}
			},
			handleClose(tag) {
				this.classifyTags.splice(this.classifyTags.indexOf(tag), 1);
			},

			//添加新标签
			showInput() {
				this.inputVisible = true;
				this.$nextTick((_) => {
					this.$refs.saveTagInput.$refs.input.focus();
				});
				// console.log(this.classifyTags)
			},

			handleInputConfirm() {
				let inputValue = this.inputValue.trim();
				if (inputValue) {
					for (let i = 0; i < this.classifyTags.length; i++) {
						if (this.classifyTags[i] == inputValue) {
							this.$message({
								showClose: true,
								message: "分类名已存在",
								type: "error",
								center:true,
								offset:(screen.height/2)-80
							});
							return;
						}
					}
					this.classifyTags.push(inputValue);
				}
				this.inputVisible = false;
				this.inputValue = "";
			},
			//提交
			submitForm() {
				if (this.phase_time.name == null) {
					this.$message({
						showClose: true,
						message: '请输入批次名称！',
						type: 'warning',
						center:true,
						offset:(screen.height/2)-80
					});
					return
				}

				if (this.batch.company == "") {
					this.$message({
						showClose: true,
						message: '请输入所属单位！',
						type: 'warning',
						center:true,
						offset:(screen.height/2)-80
					});
					return
				}

				if (this.batch.level_id == "") {
					this.$message({
						showClose: true,
						message: '请选择批次级别！',
						type: 'warning',
						center:true,
						offset:(screen.height/2)-80
					});
					return
				}

        if (this.classifyTags.length==0) {
        	this.$message({
        		showClose: true,
        		message: '项目分类不能为空！',
        		type: 'warning',
        		center:true,
        		offset:(screen.height/2)-80
        	});
        	return
        }

				if (this.batch.max_host == "") {
					this.$message({
						showClose: true,
						message: '请输入最大主持数！',
						type: 'warning',
						center:true,
						offset:(screen.height/2)-80
					});
					return
				}

        if (isNaN(this.batch.max_host)) {
					this.$message({
						showClose: true,
						message: '最大主持数请输入数字！',
						type: 'warning',
						center:true,
						offset:(screen.height/2)-80,

					});
					return
				}

        if (this.batch.max_host >=1000) {
        	this.$message({
        		showClose: true,
        		message: '最大主持数请勿大于1000！',
        		type: 'warning',
        		center:true,
        		offset:(screen.height/2)-80
        	});
        	return
        }

				if (this.batch.max_participants == "") {
					this.$message({
						showClose: true,
						message: '请输入最大参与数！',
						type: 'warning',
						center:true,
						offset:(screen.height/2)-80
					});
					return
				}

         if (isNaN(this.batch.max_participants)) {
					this.$message({
						showClose: true,
						message: '最大参与数请输入数字！',
						type: 'warning',
						center:true,
						offset:(screen.height/2)-80
					});
					return
				}

        if (this.batch.max_participants >=1000) {
        	this.$message({
        		showClose: true,
        		message: '最大参与数请勿大于1000！',
        		type: 'warning',
        		center:true,
        		offset:(screen.height/2)-80
        	});
        	return
        }

				if(this.phase_time.phase_teacher_start=="" || this.phase_time.phase_teacher_end==""){
				  this.$message({
				    type: 'warning',
				    message: '教师申报时间不能为空！ ',
				    duration: 2000,
				    offset:screen.height/2-200,
				    showClose: true,
				    center:true,
				  })
				  return false
				}
				
				if(this.phase_time.phase_department_start=="" || this.phase_time.phase_department_end==""){
				  this.$message({
				    type: 'warning',
				    message: '院级审核时间不能为空！ ',
				    duration: 2000,
				    offset:screen.height/2-200,
				    showClose: true,
				    center:true,
				  })
				  return false
				}
				
				if(this.phase_time.phase_school_first_start=="" || this.phase_time.phase_school_first_end==""){
				  this.$message({
				    type: 'warning',
				    message: '校级审核时间不能为空！ ',
				    duration: 2000,
				    offset:screen.height/2-200,
				    showClose: true,
				    center:true,
				  })
				  return false
				}
				if(this.switchExpert==true){
				  if(this.phase_time.phase_expert_start=="" || this.phase_time.phase_expert_end==""){
				    this.$message({
				      type: 'warning',
				      message: '专家审核时间不能为空！ ',
				      duration: 2000,
				      offset:screen.height/2-200,
				      showClose: true,
				      center:true,
				    })
				    return false
				  }
				  
				  if(this.phase_time.phase_school_second_start=="" || this.phase_time.phase_school_second_end==""){
				    this.$message({
				      type: 'warning',
				      message: '校级复审时间不能为空！ ',
				      duration: 2000,
				      offset:screen.height/2-200,
				      showClose: true,
				      center:true,
				    })
				    return false
				  }
				}
				this.createBatchAxios();

			},
		},
		//对象内成员监听映射
		computed: {
			phase_teacher_start() {
				return this.phase_time.phase_teacher_start;
			},
			phase_teacher_end() {
				return this.phase_time.phase_teacher_end;
			},
			phase_department_start() {
				return this.phase_time.phase_department_start;
			},
			phase_department_end() {
				return this.phase_time.phase_department_end;
			},
			phase_school_first_start() {
				return this.phase_time.phase_school_first_start;
			},
			phase_school_first_end() {
				return this.phase_time.phase_school_first_end;
			},
			phase_expert_start() {
				return this.phase_time.phase_expert_start;
			},
			phase_expert_end() {
				return this.phase_time.phase_expert_end;
			},
			phase_school_second_start() {
				return this.phase_time.phase_school_second_start;
			},
			phase_school_second_end() {
				return this.phase_time.phase_school_second_end;
			},
		},
		//对象内成员监听
		watch: {
			phase_teacher_start(newV, oldV) {
				console.log(newV);
				this.phase_time.phase_teacher_start = newV;
			},
			phase_teacher_end(newV, oldV) {
				console.log(newV);
				this.phase_time.phase_teacher_end = newV;
			},
			phase_department_start(newV, oldV) {
				this.phase_time.phase_department_start = newV;
				console.log(this.phase_time.phase_department_start);
			},
			phase_department_end(newV, oldV) {
				this.phase_time.phase_department_end = newV;
			},
			phase_school_first_start(newV, oldV) {
				this.phase_time.phase_school_first_start = newV;
			},
			phase_school_first_end(newV, oldV) {
				if (newV == "") this.emptyAlert();
				this.phase_time.phase_school_first_end = newV;
			},
			phase_expert_start(newV, oldV) {
				this.phase_time.phase_expert_start = newV;
			},
			phase_expert_end(newV, oldV) {
				this.phase_time.phase_expert_end = newV;
			},
			phase_school_second_start(newV, oldV) {
				this.phase_time.phase_school_second_start = newV;
			},
			phase_school_second_end(newV, oldV) {
				if (newV == "") this.emptyAlert();
				this.phase_time.phase_school_second_end = newV;
			},
			switchAlert() {
				if (!this.switchAlert) this.emptyAlert();
			},
			value() {
				console.log(this.value);
			},
		},
	};
</script>
<style scoped>
	h1 {
		font-size: 30px;
		text-align: center;
	}

	.el-switch {
		padding-top: 10px;
	}

	#formBatch {
		width: 800px;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}

	#btn{
  position: absolute;
  left: 45%;
  transform: translateX(-50%);
}


	#switchExpert .el-switch {
		position: absolute;
		left: 30%;
		transform: translateX(-50%);
	}

	#btn {
		padding-bottom: 30px;
	}

	.el-tag+.el-tag {
		margin-left: 10px;
	}

	.button-new-tag {
		margin-left: 10px;
		height: 32px;
		line-height: 30px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.input-new-tag {
		width: 90px;
		margin-left: 10px;
		vertical-align: bottom;
	}
</style>
